<template>
  <div class='reg'>
    <mt-header fixed title="注册">
      <router-link to="/" replace slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <p>注册</p>
    <mt-field label='登录账号' placeholder="手机号/用户名" type="email" v-model="email"></mt-field>
    <mt-field class="password" label='密码' placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <!-- <mt-field class="password" label='确认密码' placeholder="请输入登录密码" type="password" v-model="repalcePassword"></mt-field> -->
    <mt-field class="password" label='微信昵称' placeholder="请输入微信昵称"  v-model="nickName"></mt-field>
    <mt-field class="password" label='微信号' placeholder="请输入微信号"  v-model="wechatNumber"></mt-field>
    <mt-button type="primary" class="logBtn" size='large' @click="submit()">注册</mt-button>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      key: '',
      email: '',
      // repalcePassword: '',
      password: '',
      // phone: '',
      nickName: '',
      wechatNumber: ''
    }
  },
  methods: {
    async submit () {
      if (!this.email) {
        Toast('请输入手机号/用户名')
        return
      }
      if (!this.password) {
        Toast('请输入密码')
        return
      }
      if (!this.nickName) {
        Toast('请输入微信昵称')
        return
      }
      if (!this.wechatNumber) {
        Toast('请输入微信号')
        return
      }
      let that = this
      try {
        let res = await that.$api({
          method: 'post',
          url: '/app/user/regist',
          params: {
            phone: that.email,
            password: that.password,
            nickName: that.nickName,
            wechatNumber: that.wechatNumber
          }
        })
        if (res.success === true) {
          console.log(res)
          Toast(res.msg)
          setTimeout(() => {
            this.$router.push('/login')
          }, 2500)
        } else {
          Toast(res.msg)
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.reg{
  background: #fff;
  height: 100vh;
  padding: .6rem .12rem;
}
/deep/.mint-header{
  background-color: #999;
}
p{
  font-size: .34rem;
  text-align: center;
}
.logBtn{
  margin-top: .3rem;
}
  /deep/.mint-cell-wrapper{
    background-image: none
  }
  /deep/.mint-cell{
    background: #f2f2f2;
    margin-top: .1rem;
  }
  /deep/.mint-field-core{
    background: #f2f2f2;
  }
</style>
